<template>
  <div :class="{'detail-with-title': !!title}">
    <h4 class="withVerticleLineT4" v-if="title">{{ $t(title) }}</h4>
    <a-row :gutter="[20,0]" class="detail-row" style="">
      <!-- 车型名称 -->
      <template v-if="items.length > 0">
        <template v-for="item in items">
          <detail-item :span="item.span" :sm="item.sm" :xs="item.xs" :md="item.md" :lg="item.lg"
            :label="$t(item.name || item.key)" :content="item.value ? item.value : data[item.key]" :label-width="item.labelWidth" v-if="!item.slot">
            <slot :name="item.key + 'Label'" v-if="!item.name"/>
            <slot :name="item.key + 'Content'" v-if="!item.value"/>
          </detail-item>
          <slot :name="item.key" v-else/>
        </template>
      </template>
      <slot v-else/>
    </a-row>
  </div>
</template>
<script>
  import EditItem from './detailItem'

  export default {
    components: {
      'detail-item':EditItem,
    },
    props: {
      title: {
        type: String,
        default: ''
      },
      data: {
        type: Object,
        default: () => {}
      },
      items: {
        type: Array,
        default: () => []
      },
      time: {
        type: Number,
        default: 789520
      }
    },
    data() {
      return {
      }
    },
  }
</script>
<style lang="less">
  .detail-with-title{
    h4{
      font-weight: bold;
      font-size: 1.2rem;
    }
    .detail-row{
      padding-top: 12px;
      padding-bottom: 24px;
    }
  }
</style>